<template>
  <section>
    <el-button type="text" size="mini" @click="addNewBtn(activity.actionData.actionData.val)">New+</el-button>
    <el-table :data="activity.actionData.actionData.val">
      <el-table-column type="index" label="序号" width="50px"/>
      <el-table-column label="商品">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.goodsName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="类型">
      <template slot-scope="scope">
        <el-select size="mini" v-model="scope.row.businessType" v-if="businessTypeList">
          <el-option v-for="type in businessTypeList" :key="type.id" :value="type.code" :label="type.name"/>
        </el-select>
      </template>
    </el-table-column>
      <el-table-column label="属性">
        <template slot-scope="scope">
          <el-row v-for="(prop,index) in scope.row.props" :key="index">
            <el-input size="mini" v-model="scope.row.props[index]"></el-input>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="价格" >
        <template slot-scope="scope">
          <el-row v-for="(price,index) in scope.row.prices" :key="index">
            <el-input size="mini" v-model="scope.row.prices[index]"></el-input>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="限购量" width="70px">
        <template slot-scope="scope">
          <el-row v-for="(amount,index) in scope.row.amounts" :key="index">
            <el-input size="mini" v-model="scope.row.amounts[index]"></el-input>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="sn" width="280px">
        <template slot-scope="scope">
          <el-row v-for="(sns,index) in scope.row.sns" :key="index" style="border: 0px solid red">
            <el-col :span="14">
              <el-input size="mini" v-model="scope.row.sns[index]"></el-input>
            </el-col>
            <el-col :span="4">
              <i class="el-icon-circle-close-outline" style="color:red;line-height:26px" @click="scope.row.props.splice(index,1) && scope.row.sns.splice(index,1)&& scope.row.amounts.splice(index,1)&& scope.row.prices.splice(index,1)"/>
            </el-col>
            <el-col :span="4">
              <i class="el-icon-circle-plus-outline" style="line-height:26px" @click="scope.row.props.push('') && scope.row.sns.push('')&& scope.row.amounts.push('')&& scope.row.prices.push('')"/>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <el-button type="danger" @click="activity.actionData.actionData.val.splice(scope.$index,1)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "shopping",
    props: ['activity'],
    data(){
      return{
        businessTypeList:null
      }
    },
    watch: {
    },
    computed:{
      ...mapGetters(['department']),
    },
    created(){
      this.getBusinessTypeList()
      //加载商品，加载商品sku
      if(this.activity.actionData.actionData.val){

      }else {
        Vue.set(this.activity.actionData.actionData,'val',[])
      }
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getBusinessTypeList(){
        this.fetch({name:"getBusinessTypeList"})
          .then(res=>{
            console.log('业务类型列表------------',res)
            this.businessTypeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addNewBtn(vals){
        let tmp={
          goodsName:'',props:[''],sns:[''],amounts:[''],prices:[''],businessType:'none'
        }
        vals.push(tmp)
      }
    }
  }
</script>

<style scoped>

</style>
